<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>创建房间</title>
    <script th:src="jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
    <input id="info" type="hidden" th:value="${roomMap}"/>
    当前在线房间信息如下：<div id="onlineRoom"></div>
</div>

<div>
    请输入昵称: <input id="playerName" type="text">
</div>

<div>
    请输入房间号: <input id="createNum" type="text">
    <select id="playerNum">
        <option value="">请选择房间人数</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <button onclick="createRoom()">创建房间</button>

</div>

<div>
    请输入房间号: <input id="joinNum" type="text">
    <button onclick="joinRoom()">加入房间</button>
</div>

<script>
    $(document).ready(function(){
        let tmp = document.getElementById('info').value;
        let rmMap = JSON.parse(tmp);
        let keys = Object.keys(rmMap);
        for (let key in keys){
            console.log(keys[key]);
            let txt="<p>"+ "房间号："+ keys[key] + "几人场："+ rmMap[keys[key]] + "</p></br>";
            $('#onlineRoom').append(txt);
        }

        // for (var rmId in rmMap) {
        //     console.log(rmId + ':' + rmMap[rmId])
        // }
    });


    function createRoom() {

        let CroomNum = $('#createNum').val();
        let playerName = $('#playerName').val();
        let playerNum = $('#playerNum').val();
        if(playerName===""){
            alert("请输入昵称");
            return;
        }
        if(CroomNum===""){
            alert("请输入房间号");
            return;
        }
        if(playerNum===""){
            alert("请选择房间人数");
            return;
        }
        console.log(CroomNum);
        window.location.href="/threeGame?roomid="+CroomNum+"&playerName="+playerName+"&playerNum="+playerNum;
    }

    function joinRoom() {
        let playerName = $('#playerName').val();
        let CroomNum = $('#joinNum').val();

        if(playerName===""){
            alert("请输入昵称");
            return;
        }
        if(CroomNum===""){
            alert("请输入房间号");
            return;
        }

        console.log(CroomNum);
        window.location.href="/threeGame?roomid="+CroomNum+"&playerName="+playerName;
    }

</script>
</body>
</html>